<template>
    <el-drawer v-model="visible" title="日历">
        <el-card title="日历">
            <el-calendar v-model="value">
                <template #date-cell="{ data }">
                    <p :class="getDayStyle(data)">
                        {{ data.day.split('-').slice(-1).join() }}
                    </p>
                </template>
            </el-calendar>
        </el-card>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
const value = ref(new Date())
const visible = defineModel();
const drawDays = [1, 3, 6];

const getDayStyle = (data) => {
    let day = new Date(data.day).getDay();
    let arr = ['text-center'];
    if (drawDays.includes(day)) {
        arr.push(data.type == 'current-month' ? 'text-red-600' : 'text-red-300');
    }
    return arr.join(' ');
}
</script>

<style scoped>
.el-calendar-table .el-calendar-day {
    height: fit-content;
}
</style>